<template>
  <div>
    <h1 style="margin-left: 400px">实时报表</h1>
    <el-input v-model="event" type="textarea" :rows="15"  style="height:300px;width: 1000px;margin-left: 20px;margin-top: 10px;font-size: 20px" readonly></el-input>
  </div>
</template>

<script>

export default {
  name: "DataManagement",
  data() {
    return{
      websocket: null,
      event:"事件：",
      eventList:[],
      singleEvent:{
        id: 0,
        eventType: "",
        eventDate: "",
        eventLocation: "",
        eventDescription: "",
        oldPersonId: 0,
        volunteerId: 0,
        oldPersonName: "",
        volunteerName: ""
      },
    }
  },

  methods: {
    // onConfirm() {
    //   //需要传输的数据
    //   let data = {
    //     code: 1,
    //     item: '传输数据'
    //   }
    //   //在方法里调用 this.websocketsend()发送数据给服务器
    //   this.websocketsend(JSON.stringify(data))
    // },

    eventShow: function(){
      this.event = "事件：";
      let length = this.eventList.length
      this.eventList = this.eventList.reverse()
      for(let i = 0;i<length;i++){
        //alert(i+"   "+this.eventList.length)
        this.singleEvent = this.eventList.pop();
        if(this.singleEvent.eventDescription == "smile"){
          this.event = this.event+"\n"+this.singleEvent.eventDate + "  老年人:" + this.singleEvent.oldPersonName + " 笑了~~~";
        }
        else if(this.singleEvent.eventDescription == "stranger"){
          this.event = this.event+"\n"+this.singleEvent.eventDate + "  陌生人在摄像头:" + this.singleEvent.eventLocation + " 处出现！！！";
        }
        else if(this.singleEvent.eventDescription == "volunteer"){
          this.event = this.event+"\n"+this.singleEvent.eventDate +"  义工："+this.singleEvent.volunteerName+"  和老人："+this.singleEvent.oldPersonName+ "  在摄像头:" + this.singleEvent.eventLocation + " 处在交互~~~"
        }
        else if(this.singleEvent.eventDescription == "fall"){
          this.event = this.event+"\n"+this.singleEvent.eventDate + "  有人在摄像头：" + this.singleEvent.eventLocation + "  处摔倒！！！";
        }
        else{
          this.event = this.event + "\n" + "未知事件";
        }
      }
    },

    eventAll:function(){
      const _this = this
      let formData = new FormData();
      // formData.append('email', _this.loginForm.email);
      // formData.append('password', _this.loginForm.password);
      this.$axios.post('/event/select', formData,
          {
            headers: {
              "Content-Type": "application/json;charset=utf-8"
            },
            withCredentials: true
          }
      ).then(function (response) {
        //alert(123);
        // 这里是处理正确的回调
        if (response.data.code == '0') {
          _this.eventList = response.data.data;

          _this.eventShow();
          //alert(123);
          _this.$message({
            message: '新事件发生',
            type: 'warning'
          });
        } else {
          _this.$message.error(response.data.msg);
        }
      }).catch(function (response) {
        // 这里是处理错误的回调
        console.log(response)
      });
    },

    initWebSocket() { // 初始化weosocket
      this.websock = new WebSocket('ws://localhost:8081/websocket/wanglei')

      this.websock.onmessage = this.websocketonmessage
      this.websock.onerror = this.websocketonerror
      this.websock.onopen = this.websocketonopen
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() { // 连接建立之后执行send方法发送数据
      let data = {
        code: 0,
        msg: '这是client：初次连接'
      }
      this.websocketsend(JSON.stringify(data))
      this.$message.success("WebSocket连接开始！")
    },
    websocketonerror() {
      this.$message.error('WebSocket连接失败')
    },
    websocketonmessage(e) { // 数据接收
      console.log('数据接收' + e.data)
      //alert('你有新消息:' + e.data)
      //this.$message.success(e.data)
      this.eventAll();
    },
    websocketsend(Data) { // 数据发送
      this.websock.send(Data)
    },
    websocketclose() {  // 关闭
      this.$message.error('已关闭连接')
    },

    destroyed() {
      this.websock.close() // 离开路由之后断开websocket连接
    },
  },
  created () {
    console.log('created')
    this.initWebSocket()
    this.eventAll()
  },
}

</script>


<style scoped>
</style>
